/**
    弹出选择器
        底部弹出选择组件
        和后端商讨过字典都是code和name，搜索组件没有做配置项

        props
            value[boolean = false] * 组件是否显示v-model绑定
            columns[array | object] 选择项配置（和van-picker组件的一样）
            autoClose[boolean = true] 操作后自动关闭组件
            assignment[object] 组件选择中后赋值的对象 必须穿普通对象（array不行） 不传的组件不会做赋值操作
            code[string = ''] 赋值的code字段名
            name[string = ''] 赋值的name字段名

        emit
            confirm 点击确定触发
                data 点击的props.columns中的item数据
                index 点击的props.columns中的item的index
 */

<template>
    <van-popup v-model="visible"
               get-container="body"
               position="bottom">
        <van-picker show-toolbar
                    :columns="columns"
                    @confirm="fnConfirm"
                    value-key="name"
                    @cancel="fnColse">
        </van-picker>
    </van-popup>
</template>

<script>
import _ from "lodash"

export default {
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true
        },
        columns: {
            type: Array | Object,
            default: () => ([])
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true
        },
        // 组件选择中后赋值的对象
        assignment: {
            default: undefined,
            // _.isEmpty判断不出{}和{}, 所以不设置type而通过validator校验
            validator: function (value) {
                if (_.isPlainObject(value)) {
                    return true
                } else {
                    console.warn('v-popup-picker组件的assignment要求是普通对象（array不行）')
                    return false
                }
            }
        },
        // 赋值的code
        code: {
            type: String,
            default: ''
        },
        // 赋值的name
        name: {
            type: String,
            default: ''
        }
    },
    computed: {
        visible: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    },
    methods: {
        // 关闭组件
        fnColse () {
            this.visible = false
        },
        // 确定
        fnConfirm (data, index) {
            this.$emit('confirm', {
                data,
                index
            })

            // 需要组件处理赋值操作
            if (this.assignment !== undefined) {
                let keys = Object.keys(this.assignment)

                if (this.code) {
                    if (keys.some(item => (this.code == item))) {
                        this.assignment[this.code] = data.code
                    } else {
                        this.$set(this.assignment, this.code, data.code)
                    }
                }

                if (this.name) {
                    if (keys.some(item => (this.name == item))) {
                        this.assignment[this.name] = data.name
                    } else {
                        this.$set(this.assignment, this.name, data.name)
                    }
                }
            }

            this.autoClose && this.fnColse()
        }
    }
}
</script>
